import type { Meta, StoryObj } from '@storybook/vue3';
import { fn } from '@storybook/test';
import Button from './index.vue';
import ButtonGroup from '../ButtonGroup/index.vue';

const meta = {
    title: 'Components/Vue/Button',
    component: Button,
    tags: ['autodocs'],
    argTypes: {
        type: {
            control: 'select',
            options: ['primary', 'default', 'dashed', 'link', 'text'],
            description: '按钮类型',
        },
        // 也可以设置radio
        size: {
            control: 'select',
            options: ['small', 'middle', 'large'],
            description: '按钮大小'
        },
        disabled: {
            control: 'boolean',
            description: '是否禁用'
        },
        loading: {
            control: 'boolean',
            description: '是否加载中'
        }
    },
    args: {
      type: 'primary',
      size: 'middle',
      onClick: fn(), // 使用 fn 来模拟 onClick 事件处理函数，以便在 Storybook 中测试按钮的行为
      disabled: false,
      loading: false,
    }
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

// 基础按钮
export const Basic: Story = {
    args: {
        size: "large"
    },
    render: (args) => ({
        components: { Button },
        setup() {
            return { args };
        },
        template: '<Button v-bind="args">Button</Button>'
    })
    
};

// 按钮类型
export const Types: Story = {
    render: () => ({
        components: { Button },
        template: `
      <div>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="link">Link</Button>
        <Button type="text">Text</Button>
      </div>
    `
    })
};

// 按钮组
export const Group: Story = {
    render: () => ({
        components: { Button, ButtonGroup },
        template: `
      <div>
        <ButtonGroup>
          <Button>Left</Button>
          <Button>Middle</Button>
          <Button>Right</Button>
        </ButtonGroup>
        <br />
        <ButtonGroup size="small">
          <Button type="primary">Left</Button>
          <Button type="primary">Right</Button>
        </ButtonGroup>
      </div>
    `
    })
}; 